<template>
  <div id="jx-header">
    <div id="navbar">
      <el-row class="jx-header">
        <el-col :span="12" style="padding-left: 40px">
          <el-col :span="24" class="report-css-new-add">
            <div class="task-name">{{websockMsg.task}}</div>
            <div class="team-name">{{websockMsg.team}}</div>
          </el-col>
        </el-col>
        <el-col class="fr" style="width: auto">
          <div class="jx-login" @click="jumpLogin" v-if="roles == undefined">
            登录
          </div>
          <div class="jx-login-info-box" v-else>
            <div class="jx-login-info-avatar-box">
              <el-dropdown trigger="hover">
                <div class="jx-login-info-avatar">
                  <img :src="avatar" />
                </div>
                <el-dropdown-menu style="" slot="dropdown">
                  <el-dropdown-item command="a" @click.native="setFn">
                    <i class="iconfont icon-geren"></i>个人设置
                  </el-dropdown-item>
                  <el-dropdown-item command="b" v-if="
                      roles == 'TEACHER' ||
                      roles == 'MARKET_TEACHER' ||
                      roles == 'UNIVERSITY_TEACHER' ||
                      roles == 'STUDENT'
                    " @click.native="InfoMange">
                    <i class="iconfont icon-xiaoxi"></i>消息管理
                  </el-dropdown-item>
                  <!-- <el-dropdown-item command="c" v-if="roles == 'MARKET_TEACHER'" @click.native="ApplyFn">
                                        <i class="iconfont icon-shenqing"></i>申请账号</el-dropdown-item>
                                    <el-dropdown-item command="c" v-if="roles == 'INTERNET_ADMIN'" @click.native="ApplyFnAdmin">
                                        <i class="iconfont icon-shenqing"></i>申请账号</el-dropdown-item> -->
                  <el-dropdown-item command="e" divided @click.native="LogOut">
                    <i class="iconfont icon-tuichufffpx"></i>退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <!-- <i class="iconfont icon-notice"></i> -->
            <i class="iconfont icon-notice pointer" title="消息通知" v-if="roles == 'STUDENT'" @click.stop="infoShow"></i>
            <i :class="{ notification: redActive == true && num > 0 }" v-if="roles == 'STUDENT'"></i>

            <i class="iconfont icon-wenti-m" title="问题反馈" @click="ProblemFn" v-if="
                roles == 'TEACHER' ||
                roles == 'MARKET_TEACHER' ||
                roles == 'UNIVERSITY_TEACHER' ||
                roles == 'STUDENT' ||
                roles == 'INTERNET_ADMIN' ||
                roles == 'SUPER_ADMIN'
              "></i>
            <div id="notify-icon" style="float: right; overflow: hidden" v-if="roles == 'STUDENT'">
              <div class="dropdown" v-show="flag" v-if="list.length != ''">
                <div class="triangle_border_up">
                  <span></span>
                </div>
                <ul>
                  <p>消息通知 ({{ num }})</p>
                  <li v-for="(item, index) in list.slice(0, 5)" :key="index" @click="infoFn(item, item.id)">
                    <div class="fl notify"><img :src="item.userPicture" /></div>
                    <div class="fl rightpart">
                      <p>{{ item.content }}</p>
                      <div class="detail">
                        <span class="fl time">{{ item.time }}</span>
                        <span class="fr detail-right">详情</span>
                      </div>
                    </div>
                  </li>
                  <div class="more" @click.stop="moreLook" v-if="list.length > 5">
                    查看更多
                  </div>
                </ul>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import BreadCrumb from '@/components/BreadCrumb'
export default {
  props: ['websockMsg'],
  components: { BreadCrumb },
  data() {
    return {
      activeIndex: '',
      //消息闪烁
      redActive: '',
      //是否显示下拉菜单
      flag: false,
      //消息列表5条数据
      list: '',
      //消息列表所有数据
      listAll: '',
      //登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
      roles: '',
      //头像
      avatar: '',
      //管理员路由
      adminIndex: '',
      //yx通知消息
      websock: null,
      over: null,
      //信息条数
      num: '',

      infoData: '',
      innerLogoImage: '',
      projectName: '',

      // 判断课程体系显示隐藏 0隐藏 1显示
      SystermDisplay: '',
    }
  },
  created() {
    let self = this
    self.fetchDate()
    // 拉取信息
    self.loginInfo()

    // 从状态管理获取roles
    self.roles = self.$store.state.user.roles[0]
    // 判断管理员端登录用户跳转的页面
    if (self.roles == 'ADMIN' || self.roles == 'SUPER_ADMIN') {
      self.adminIndex = '/Admin/manage/TeachingMange'
    } else if (self.roles == 'INTERNET_ADMIN') {
      self.adminIndex = '/Admin/Internet/TeachMange'
    }
    // 从状态管理获取头像
    self.avatar = self.$store.state.user.avatar
    // 判断如果是学生登入就执行消息通知socket
    if (self.roles == 'STUDENT') {
      //self.initWebSocket()
      // self.handdleMsg()
      self.init()
      self.$nextTick(() => {
        document.addEventListener('click', function () {
          self.flag = false
        })
      })
    }
    // 判断课程体系显示隐藏
    if (
      self.roles == 'STUDENT' ||
      self.roles == 'TEACHER' ||
      self.roles == 'MARKET_TEACHER' ||
      self.roles == 'UNIVERSITY_TEACHER'
    ) {
      self.SystermDisplayFn()
    }
  },
  methods: {
    //test
    selecthandel(key) {
      let isClickSystem = this.$localstorage.getLocalStorage('isClickSystem')
      if (isClickSystem && key == '/Teaching/Systerm') {
        window.location.reload()
      }
    },
    // 拉取信息
    loginInfo() {
      let self = this
      self.$http
        .get('/tes/unauthorized/config?keys=projectName,innerLogoImage')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.infoData = res.data
            self.innerLogoImage = res.data.innerLogoImage[0]
            self.projectName = res.data.projectName[0]
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handdleMsg(msg) {
      let self = this
      self.global.ws.onmessage = function (res) {
        // self.global.websock.onmessage = function(res) {
        if (self.$route.path !== '/Setting/Notice/STNotification') {
          //数据接收
          const redata = JSON.parse(res.data)
          if (redata.type == 11) {
            //新增消息
            self.redActive = true
            self.flag = false
            self.init()
          } else if (redata.type == 12) {
            //删除消息
            self.init()
          }
        }
      }
    },
    fetchDate() {
      // let self = this;
      // var cur_path = self.$route.matched[1].meta.navActive; //获取当前路由
      // self.adminIndex = self.$route.matched[1].meta.navActive
      // self.activeIndex = cur_path;
    },
    // 初始化消息
    init() {
      let self = this
      self.list = ''
      self.$http.get('/tes/message/new').then((response) => {
        let res = response.data
        if (res.code == '200') {
          self.num = res.data.length
          self.list = res.data
          if (res.data.length > 0) {
            self.redActive = true
          }
        } else {
          self.$message.error(res.message)
        }
      })
    },
    // 课程体系显示隐藏
    SystermDisplayFn() {
      let self = this
      self.$http
        .get('/tes/unauthorized/config?keys=courseSystemShow')
        .then((response) => {
          let res = response.data
          if (res.code === 200) {
            self.SystermDisplay = res.data.courseSystemShow[0].keyValue
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },

    initWebSocket() {
      //初始化weosocket
      let self = this
      let hostname = window.location.host
      const wsuri = 'ws://' + hostname + '/tes/ws/global'
      self.websock = new WebSocket(wsuri)
      self.websock.onopen = self.websocketonopen
      self.websock.onmessage = self.websocketonmessage
      self.over = () => {
        self.websock.close()
      }
    },

    websocketonopen() {
      console.log('open sucess')
    },
    websocketonmessage(e) {
      // 判断当前进入哪个路由页面
      // if (
      //   this.$route.matched[2].meta.navActive !==
      //   "/Setting/Notice/STNotification"
      // ) {
      //   //数据接收
      //   const redata = JSON.parse(e.data);
      //   let self = this;
      //   if (redata.type == 11) {
      //     //新增消息
      //     self.redActive = true;
      //     self.flag = false;
      //     self.init();
      //   } else if (redata.type == 12) {
      //     //删除消息
      //     self.init();
      //   }
      // }
    },
    //下拉展示
    infoShow() {
      if (this.flag) {
        this.flag = false
      } else {
        this.flag = true
        this.redActive = false
      }
    },
    //查看更多
    moreLook() {
      this.redActive = false
      this.flag = false
      this.$router.push({
        path: '/Setting/Notice/STNotification',
      })
      this.list = ''
    },
    //yx 点击某条信息进入详情页页面
    infoFn(item, id) {
      let self = this
      self.redActive = false
      self.$router.push({
        path: '/Setting/Notice/STNotification',
      })
      self.list = ''
    },
    // 跳转登录
    jumpLogin() {
      this.$router.push({
        path: '/login',
      })
    },
    // 退出登录
    LogOut() {
      let self = this
      self
        .$confirm('是否退出登录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          self.$store.dispatch('FedLogOut').then((res) => {
            // location.reload()
            //清空本地存储值yx
            self.$localstorage.putLocalStorage('isClickSystem', false)
          })
        })
        .catch(() => {})
    },
    // 个人设置
    setFn() {
      this.$router.push({
        path: '/Setting/Notice/Myinfomation',
      })
    },
    //申请账号
    ApplyFn() {
      this.$router.push({
        path: '/Setting/Notice/Application',
      })
    },
    //申请账号 管理员
    ApplyFnAdmin() {
      this.$router.push({
        path: '/Setting/Notice/AdminApplication',
      })
    },
    //消息管理
    InfoMange() {
      let self = this
      if (
        self.roles == 'MARKET_TEACHER' ||
        self.roles == 'TEACHER' ||
        self.roles == 'UNIVERSITY_TEACHER'
      ) {
        self.$router.push({
          path: '/Setting/Notice/TNotification',
        })
      } else if (self.roles == 'STUDENT') {
        self.$router.push({
          path: '/Setting/Notice/STNotification',
        })
      }
      if (this.flag) {
        this.flag = false
      } else {
        this.flag = true
        this.redActive = false
      }
    },
    //问题反馈
    ProblemFn() {
      let self = this
      if (
        self.roles == 'MARKET_TEACHER' ||
        self.roles == 'TEACHER' ||
        self.roles == 'UNIVERSITY_TEACHER' ||
        self.roles == 'STUDENT'
      ) {
        self.$router.push({
          path: '/Setting/Notice/STProblemBack',
        })
      } else if (
        self.roles == 'INTERNET_ADMIN' ||
        self.roles == 'SUPER_ADMIN'
      ) {
        self.$router.push({
          path: '/Setting/Notice/AProblemBacks',
        })
      }
    },
  },
  watch: {
    $route: 'fetchDate',
  },
}
</script>


<style scoped>
.pointer {
  cursor: pointer;
}
</style>

<style lang="scss">
#jx-header {
  overflow: hidden;
  height: 60px;
  line-height: 60px;
  .el-dropdown {
    display: block;
  }
  .el-dropdown-menu {
    .el-dropdown-menu__item {
      i {
        font-size: 12px;
        margin-right: 8px;
      }
    }
  }

  .jx-header {
    width: 100%;
    min-width: 1200px;
    height: 60px;
    line-height: 60px;
    background: #001529;
    text-align: left;
    position: fixed;
    z-index: 10;
    .el-col-12 {
      width: 55%;
    }
    .jx-header-style {
      max-width: 415px;
      width: auto;
    }
    .jx-header-logo {
      // margin-left: 43px;
      margin-left: 13px;
      img {
        float: left;
        padding: 15px 0;
      }
      span {
        //float: left;
        font-size: 18px;
        color: #fff;
        // border-left: solid 1px #fff;
        margin: 22px 0 22px 17px;
        // padding-left: 17px;
        line-height: 1;
      }
    }
    .jx-login {
      font-size: 14px;
      color: #fff;
      text-align: right;
      padding-right: 40px;
      cursor: pointer;
    }
    .jx-header-nav {
      height: 60px;
      .el-menu--horizontal {
        background: none;
        border: none;
        & > .el-menu-item {
          &.is-active {
            border-bottom: none;
            color: #fff;
            i {
              color: #fff;
            }
            // background: rgba(255, 255, 255, 0.1);
          }
        }
        & > .el-menu-item:not(.is-disabled):focus,
        & > .el-menu-item:not(.is-disabled):hover {
          border-bottom: none;
          color: #fff;
          background: transparent;
          i {
            color: #fff;
          }
          // background: rgba(255, 255, 255, 0.2);
        }
        .el-menu-item {
          // width: 10%;
          font-size: 14px;
          color: #cecece;
          text-align: center;
          border-bottom: none;
          i {
            font-size: 15px;
            color: #cecece;
            vertical-align: initial;
            margin-right: 13px;
            vertical-align: initial;
          }
        }
      }
    }
    .jx-login-info-box {
      line-height: 68px;
      .jx-login-info-avatar-box {
        float: right;
        width: 30px;
        height: 30px;
        margin: 14px 39px 0 0;
        &:hover {
          .jx-login-info-avatar {
            border: solid 2px #cecece;
          }
        }
      }
      .iconfont {
        color: #a1a6b0;
        &:hover {
          color: #fff;
          cursor: pointer;
        }
      }
      .jx-login-info-avatar {
        width: 30px;
        height: 30px;
        line-height: 26px; //yx修改
        border-radius: 20px;
        overflow: hidden;
        cursor: pointer;
        border: solid 2px rgba(0, 0, 0, 0);
        img {
          width: 100%;
        }
      }
      i {
        float: right;
        font-size: 18px;
        color: #a1a6b0;
        margin-right: 20px;
      }
      .notification {
        position: absolute;
        width: 8px;
        height: 8px;
        background: red;
        border-radius: 3px;
        top: 14px;
        right: 65px;
        -webkit-animation: shacck 2s infinite;
        -moz-animation: shacck 2s infinite;
        animation: shacck 2s infinite;
      }
    }
    #notify-icon {
      overflow: hidden;
      top: 30px;
      .icon-notice {
        display: block;
        cursor: pointer;
        .notification {
          position: relative;
          &:after {
            position: absolute;
            content: '';
            width: 8px;
            height: 8px;
            background: red;
            border-radius: 3px;
            top: 14px;
            right: 0px;
            -webkit-animation: shacck 2s infinite;
            -moz-animation: shacck 2s infinite;
            animation: shacck 2s infinite;
          }
        }
      }
      @-webkit-keyframes shacck {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      @-moz-keyframes shacck {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      @-o-keyframes shacck {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      @keyframes shacck {
        0% {
          opacity: 1;
        }

        50% {
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
      }
      .dropdown {
        padding: 10px 0;
        margin: 5px 0;
        background-color: #fff;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        position: absolute;
        top: 55px;
        right: 60px;
        z-index: 9999;
        .triangle_border_up {
          display: block;
          width: 0;
          height: 0;
          border-width: 0 8px 8px;
          border-style: solid;
          border-color: transparent transparent #fff;
          position: absolute;
          top: -9px;
          right: 33px;
        }
        & > ul {
          padding: 10px;
          overflow: hidden;
          & > p {
            padding: 5px;
          }
          & > li {
            padding: 10px;
            width: 260px;
            border-bottom: 1px solid #eaeaea;
            overflow: hidden;
            cursor: pointer;
            .notify {
              & > img {
                border-radius: 50%;
                width: 35px;
                height: 35px;
              }
            }
            .rightpart {
              width: 200px;
              margin-left: 20px;
              & > p {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 200px;
                margin-bottom: 10px;
                color: #666;
              }
              .detail {
                .detail-right {
                  color: #385899;
                  cursor: pointer;
                }
                .time {
                  font-size: 12px;
                  color: #666666;
                }
              }
            }
          }
          .more {
            text-align: center;
            line-height: 47px;
            height: 30px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .bread-crumb {
    position: fixed;
    top: 60px;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #fff;
    z-index: 1;
    .el-breadcrumb {
      margin: 0px auto 0;
      width: 1200px;
      font-size: 12px;
      height: 60px;
      line-height: 60px;
    }
  }
}
</style>


<style lang="scss" scoped>
.report-css-new-add {
  height: 60px;
  display: flex;
  text-align: center;
  font-size: 15px;
  color: #cecece;
  .task-name {
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .team-name {
    width: 50%;
  }
}
</style>
